<template>
  <view class="profile">
    <u-button text="登录" @click="onTest"></u-button>
    <view class="historical cell">
      <view class="title-box">
        <view class="title">
          观看历史
        </view>
        <view class="move">
          更多
        </view>
      </view>
      <my-scroll-view :scrollTop="0" :scroll-x="true" @lower="lower">
        <view class="video-box" :style="{width:`${110*total}rpx`}">
          <block v-for="(item,index) in historical">
            <view class="video-item" @click="onDetail(item.id,item.chapter_id)">
              <view class="img">
                <image :src="item.img_url" mode="widthFix" />
              </view>
              <view class="info">
                <view class="name">
                  <u-text align="center" :text="item.name" :lines="1" size="12"></u-text>
                </view>
                <view class="title">
                  <u-text align="center" :text="item.title" :lines="1" size="12"></u-text>
                </view>
              </view>
            </view>
          </block>
        </view>
      </my-scroll-view>
    </view>
    <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10">
    </u-upload>
  </view>
</template>

<script>
  import myScrollView from '@/components/my-scroll-view/my-scroll-view.vue'
  export default {
    components: {
      myScrollView
    },
    data() {
      return {
        historical: [],
        total: 0,
        fileList1: [],

      };
    },
    onShow() {
      this.init()
    },
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url, lists[i].type)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: 'result'
          }))
          fileListLen++
        }
      },
      async uploadFilePromise(url, type) {
        const blob = await fetch(url).then(r => r.blob())
        let file = new window.File([blob], "img.png", {
          type: "image/png"
        })
        console.log(file);
        const formDate = new FormData()
        formDate.append('files', file)
        const res = await this.$api.uploadFile(formDate)

      },
      async init() {
        const user = uni.getStorageSync('user')
        const param = {
          uid: user.id,
        }
        const res = await this.$api.historicalRecord(param)
        console.log(res, '历史记录');
        if (res.code == 200) {
          this.historical = res.data
          this.total = res.data.length
        }
      },
      // 测试登录,
      async onTest() {
        const user = {
          account: 18819310489,
          password: 123456
        }
        const res = await this.$api.Login(user)
        const {
          token,
          userInfo
        } = res.data
        uni.setStorageSync('token', token)
        uni.setStorageSync('user', userInfo)
        console.log(res, '登录');
      },
      lower(e) {
        console.log(e, '到底了');
      },
      onDetail(comic_id, chapter_id) {
        uni.navigateTo({
          url: `/pages/cartoon-page/cartoon-page?chapter_id=${chapter_id}&comic_id=${comic_id}`
        })

      }
    }
  }
</script>

<style lang="scss">
  .profile {
    background: rgb(246, 247, 249);

    .cell {
      margin: 20rpx;
      background: #fff;
      border-radius: 10rpx;
    }

    .historical {
      height: auto;
      padding-bottom: 20rpx;
    }

    .title-box {
      display: flex;
      justify-content: space-between;
      padding: 0 20rpx;
      height: 90rpx;
      line-height: 90rpx;

      .title {
        font-size: 30rpx;
        font-weight: 700;
      }

      .move {
        font-size: 26rpx;
        color: rgb(150, 149, 154);
      }
    }

    .video-box {
      min-width: 100%;
      display: flex;
      padding-left: 20rpx;
      margin-bottom: 10rpx;

      .video-item {
        // height: 100rpx;
        width: 160rpx;
        // line-height: 100rpx;
        text-align: center;
        // background-color: #f3f4f8;
        // border: 2rpx solid red;
        // border-radius: 2rpx;
        margin-right: 10rpx;

        .img {
          image {
            width: 150rpx;
          }
        }

        .info {
          .name {
            font-size: 20rpx;
          }

          .title {
            font-size: 20rpx;
          }
        }
      }
    }
  }
</style>
